<template>
	<view class="circle">
		<!-- 圆形进度条 -->
		<view class="progressbar">
			<!-- 背景框 -->
			<view class="bg"></view>
			<!-- 左半边进度 -->
			<view class="left" v-if="leftRotate">
				<view class="circleBar" :style="{transform: 'rotate(' + leftRotate + 'deg)'}"></view>
			</view>
			<!-- 右半边进度 -->
			<view class="right" v-if="rightRotate">
				<view class="circleBar" :style="{transform: 'rotate(' + rightRotate + 'deg)'}"></view>
			</view>
		</view>
		<!-- 圆点 -->
		<view class="point" v-if="pointRotate" :style="{transform: 'rotate(' + pointRotate + 'deg)'}">
			<view class="bg"></view>
			<view class="spot"></view>
		</view>
		<!-- 主体内容 -->
		<view class="main">
			<text class="title">分值</text>
			<text class="num">{{ currentVal }}</text>
		</view>
		<!-- 下跌 -->
		<view class="down trend" v-if="status == 2">
			<image class="img first" src="https://s3.bmp.ovh/imgs/2022/05/01/fcbc70e91a002382.png"></image>
			<image class="img last" src="https://s3.bmp.ovh/imgs/2022/05/01/fcbc70e91a002382.png"></image>
		</view>
		<!-- 上涨 -->
		<view class="up trend" v-if="status == 1">
			<image class="img first" src="https://s3.bmp.ovh/imgs/2022/05/01/e62b129021a0e9e5.png"></image>
			<image class="img last" src="https://s3.bmp.ovh/imgs/2022/05/01/e62b129021a0e9e5.png"></image>
		</view>
		<view class="footer">查看详情</view>
	</view>
</template>

<script>
export default {
	props: {
		maxVal: {
			type: Number,
			default: 0,
		},
		currentVal: {
			type: Number,
			default: 0
		},
		status: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			leftRotate: 0,			// 左边角度
			rightRotate: 0,		// 右边角度
			pointRotate: 0,			// 圆点角度
		}
	},
	watch: {
		currentVal(newVal) {
			this.setCircle();
			if (newVal < this.maxVal / 2) {
				this.rightRotate = 0;
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.setCircle();
		},
		setCircle() {
			const { currentVal, maxVal } = this;
			if (currentVal > maxVal / 2) {
				this.leftRotate = this.formatDegree(maxVal / 2);
				this.rightRotate = this.formatDegree(currentVal - maxVal / 2);
			} else {
				this.leftRotate = this.formatDegree(currentVal);
			}
			this.pointRotate = this.formatDegree(currentVal);
		},
		formatDegree(percent) {
			return -136 + (360 / this.maxVal * percent);
		}
	}
}
</script>

<style lang="scss" scoped>
.circle {
	position: relative;
	width: 240rpx;
	height: 240rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.progressbar {
		display: flex;
		justify-content: center;
		position: relative;
		.bg {
			width: 200rpx;
			height: 200rpx;
			border: 6rpx solid rgb(239, 228, 204);
			border-radius: 50%;
		}
		.circleBar {
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			border: 6rpx solid transparent;
			border-radius: 50%;
			transform: rotate(-136deg);
			transition: transform .3s;
		}
		.left {
			position: absolute;
			width: 50%;
			height: 100%;
			left: 0;
			overflow: hidden;
			.circleBar {
				left: 0;
				border-left-color: rgba(226,164,53,0.60);
				border-bottom-color: rgba(226,164,53,0.60);
			}
		}
		.right {
			position: absolute;
			width: 50%;
			height: 100%;
			overflow: hidden;
			right: 0;
			.circleBar {
				right: 0;
				border-right-color: rgba(226,164,53,0.60);
				border-top-color: rgba(226,164,53,0.60);
			}
		}
		.show {
			opacity: 1;
		}
		.hide {
			opacity: 0;
		}
	}
	.point {
		position: absolute;
		top: 6rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		transition: all .3s;
		transform: rotate(-136deg);
		.bg {
			width: 24rpx;
			height: 24rpx;
			background: rgba(#E2A435, .5);
			position: absolute;
			left: 19rpx;
			top: 15rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: zoom 1.2s infinite;
		}
		.spot {
			position: absolute;
			left: 25rpx;
			top: 20rpx;
			width: 12rpx;
			height: 12rpx;
			background: #E2A435;
			border-radius: 50%;
		}
		
	}
	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 40rpx;
		.title {
			font-size: 24rpx;
			color: #6B778A;
		}
		.num {
			font-size: 52rpx;
			color: #303133;
		}
	}
	.trend {
		position: absolute;
		top: 60rpx;
		right: 20rpx;
		.img {
			width: 22rpx;
			height: 46rpx;
			opacity: 0;
		}
	}
	.down {
		.first {
			animation: downImg .6s ease-in both;
			animation-iteration-count: 2;
		}
		.last {
			animation: downImg .6s .3s ease-in both;
			animation-iteration-count: 2;
		}
	}
	.up {
		.first {
			transform: translateY(30rpx);
			animation: upImg .6s ease-in both;
			animation-iteration-count: 2;
		}
		.last {
			transform: translateY(30rpx);
			animation: upImg .6s .3s ease-in both;
			animation-iteration-count: 2;
		}
	}
	.footer {
		display: none;
		width: 200rpx;
		text-align: center;
		font-size: 28rpx;
		background: rgb(245, 239, 226);
	}
	@keyframes zoom {
		0%,100% {
			transform: scale(.7);
		}
		50% {
			transform: scale(.9);
		}
	}
	@keyframes downImg {
		20% {
			opacity: 1;
		}
		100% {
			transform: translateY(50rpx);
			opacity: 0;
		}
	}
	@keyframes upImg {
		20% {
			opacity: 1;
		}
		100% {
			transform: translateY(-14rpx);
			opacity: 0;
		}
	}
}
</style>
